<template>
    <el-card shadow="never" class="header">
        <div>活动标题：{{ info.title }}</div>
        <div>活动时间：{{ info.period_type == 1 ? '永久' : `${info.effect_time[0]} 至 ${info.effect_time[1]}` }}</div>
        <div class="status">
            活动状态：<ElTooltip placement="top" :disabled="![3, 4].includes(info.status)">
                <template #content>
                    结束方式：{{ info.status == 4 ? '手动结束' : '自动结束' }}
                    <br />
                    结束时间：{{ info.actual_end_time || '--' }}
                    <br />
                    操作人：{{
                        info.end_operator_name ? (info.end_operator_id == 0 ? '--' : info.end_operator_name) : '--'
                    }}
                    <br />
                </template>
                <span
                    class="status-point"
                    :style="{ '--status-bgcolor': StatusColorOption[info.status_name] || '#D8D8D8' }">
                    {{ info.status_name === '提前结束' ? '已结束' : info.status_name }}
                </span>
            </ElTooltip>
        </div>
        <div>创建人：{{ info.created_uid_name }}</div>
        <div>创建时间：{{ info.created_at }}</div>
    </el-card>
</template>
<script setup lang="ts">
import { withDefaults, defineProps } from 'vue';
import { StatusColor } from '@/utils/smartMarketing';
interface Props {
    info: any;
}
withDefaults(defineProps<Props>(), {
    info: () => {
        return {
            activity_name: '',
            period_type: 1,
            created_at: '',
            real_end_date: '',
            created_user: '',
            status_name: '',
            effect_time: ['', '']
            // last_update_time: ''
        };
    }
});
// 状态颜色
const StatusColorOption = {
    未开始: '#EAEAEA',
    进行中: '#2FB6E4',
    已结束: '#F14144',
    提前结束: '#ff0004'
};
</script>
//
<style lang="scss" scoped>
.header {
    margin-bottom: 16px;

    :deep(.el-card__body) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
        font-size: 14px;
    }

    :deep(.status-point) {
        cursor: default;
        display: inline-flex;
        align-items: center;

        --status-bgcolor: #ffd500;

        &::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 8px;
            background-color: var(--status-bgcolor);
            border-radius: 4px;
        }
    }
}
</style>
